<template>
  <div class="bg-color-white" v-if="content.componentType === 17">
    <div class="align-c">
      <div class="audio-box pos-rel">
        <div class="audio-bar">
          <label v-show="!content.show" @click="audioPlay" class="width-42 height-42 audio-btn play"></label>
          <label v-show="content.show" @click="audioPause" class="width-42 height-42 audio-btn pause"></label>
        </div>
        <audio :id="'myAudio'+content.sortNo" class="audio-con" poster="https://projectimg.joinsun.vip/images/audio-default-2.png" :name="content.audio.title" :author="content.audio.subtitle" :src="content.audio.audioUrl"
          controls="controls" :loop="content.audio.loopPlayback === 1 ? 'loop':''" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    content: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  methods: {
    audioPlay() {
      this.$emit('audioPlay', this.content.sortNo)
    },
    audioPause() {
      this.$emit('audioPause', this.content.sortNo)
    }
  }
}
</script>
<style lang="less" scoped>
// 音频
.audio-box {
  margin: 6px 0px;
  width: 340px;
  height: 70px;
  overflow: hidden;
  text-align: center;
  .audio-con {
    display: inline-block;
    text-align: left;
  }
  .default-bar {
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 1;
  }
  .audio-bar {
    // background: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 70px;
    z-index: 2;
    .audio-btn {
      position: absolute;
      left: 20px;
      top: 50%;
      margin-top: -21px;
    }
    .audio-title {
      position: absolute;
      left: 70px;
      top: 0;
      height: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
